<template>
    <div class="navigation">
        <!-- 搜索 -->
        <div class="search">
            <div>
                <el-input clearable placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="百度" value="1"></el-option>
                        <!-- <el-option label="谷歌" value="2"></el-option>
                        <el-option label="知乎" value="3"></el-option> -->
                    </el-select>

                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
        </div>
        <!-- 标签页 -->
        <el-tabs type="border-card">
            <el-tab-pane label="推荐导航">
                <el-row :gutter="10">
                    <el-col class="col6" :span="6" v-for="(item, index) in navList" :key="'navList' + index">
                        <div @click="goUrl(item.website)" class="grid-content bg-purple">
                            <img :src="item.icon">
                            <span>{{ item.nav_name }}</span>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <!-- <el-tab-pane label="自定义">自定义</el-tab-pane> -->
        </el-tabs>
    </div>
</template>

<script>
import { getNav } from "@/api";
export default {
    name: 'navigation',
    components: {

    },
    data() {
        return {
            select: '1',
            input3: '',
            navList: [],
        }
    },
    mounted() {
        getNav({ type: 0 }).then(res => {
            this.navList = res.data.results
        })
    },
    methods: {
        goUrl(url) {
            window.open(url);
        },
        search() {
            if (this.select == 1) {
                // 百度
                let url = `https://www.baidu.com/s?wd=${this.input3}`
                this.goUrl(url)
            }
        }
    }
}
</script>
<style lang="less">
.navigation {
    .el-select .el-input {
        width: 80px;
    }

    .el-input-group__prepend {
        background-color: #fff;
    }

    .el-icon-search {
        cursor: pointer;
    }

    .el-input-group__append {
        background-color: #fff;
    }

    .el-tabs__content {
        min-height: 400px;
    }

    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        display: flex;
        align-items: center;

        >img {
            border-radius: 10%;
            width: 50px;
            height: 50px;
            object-fit: cover;
            margin: 0 20px 0 10px;
        }

        // background: #d3dce6;
        &:hover {
            // background: #d3dce6;
            box-shadow: 0 2px 6px rgb(92 88 88 / 18%);
        }
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-input__inner {
        border: 1px solid #DCDFE6 !important;
    }

    .col6 {
        cursor: pointer;
        line-height: 70px;
        height: 70px;
    }
}
</style>
<style le></style>
<style lang="less" src="./index.less" scoped></style>